<template>
    <section class="modlude">
        <!-- <el-form label-width="30px" style="margin-top:20px;" >
            <el-form-item size="small">
                <el-radio-group v-model="payType" @change="getlist">
                    <el-radio :label="0">临停缴费</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form> -->
        <el-form :inline="true" :model="formSearch" label-width="80px" v-if="payType==0" class="form_inline">
            <el-form-item label="选择项目" size="small" prop="projectId">
                <el-select v-model="formSearch.projectId" placeholder="请选择项目" clearable>
                    <el-option v-for="item in xqTree" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车牌号" size="small">
                <el-input v-model="formSearch.cph" placeholder="请输入车牌号" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否缴费" size="small">
                <el-select v-model="formSearch.type" clearable>
                    <el-option label="否" :value="1"></el-option>
                    <el-option label="是" :value="2"></el-option>
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="收费渠道" size="small">
        <el-select v-model="payType" @change="getlist">
          <el-option label="临停缴费" :value="0"></el-option>
          <el-option label="月卡续费" :value="3"></el-option>
        </el-select>
      </el-form-item> -->
            <el-form-item label="开始时间" size="small">
                <el-date-picker v-model="formSearch.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" size="small">
                <el-date-picker v-model="formSearch.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item size="small">
                <el-button size="small" @click="sendData">查 询</el-button>
                <el-button size="small" @click="showAdd0=true" v-if="payType==3">新增缴费记录</el-button>
                <!-- <el-button size="small" @click="showAdd0=true" v-if="payType==0">现金缴费</el-button> -->
            </el-form-item>
        </el-form>
        <!--  -->
        <el-form :inline="true" :model="formSearch1" label-width="100px" v-if="payType==3">
            <el-form-item label="选择项目" size="small" prop="projectId">
                <el-select v-model="formSearch.projectId" placeholder="请选择项目">
                    <el-option v-for="item in xqTree" :label="item.name" :value="item.id" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车牌号" size="small">
                <el-input v-model="formSearch1.cph" placeholder="请输入车牌号"></el-input>
            </el-form-item>
            <!-- <el-form-item label="充值月租" size="small">
        <el-input v-model="formSearch1.monthCount" placeholder="请输入充值月租"></el-input>
      </el-form-item> -->
            <el-form-item label="充值时间" size="small">
                <el-date-picker v-model="formSearch1.gmtCreate" type="datetime" value-format="timestamp"
                    placeholder="充值时间">
                </el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="开始时间" size="small">
        <el-date-picker
          v-model="formSearch1.startTime"
          type="datetime"
          value-format="timestamp"
          placeholder="开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" size="small">
        <el-date-picker
          v-model="formSearch1.endTime"
          type="datetime"
          value-format="timestamp"
          placeholder="结束时间">
        </el-date-picker>
      </el-form-item> -->

            <el-form-item>
                <el-button size="small" @click="sendData">查 询</el-button>
                <el-button size="small" @click="showAdd1=true" v-if="payType==3">新增缴费记录</el-button>
                <!-- <el-button size="small" @click="showAdd1=true" v-if="payType==0">现金缴费</el-button> -->
            </el-form-item>
        </el-form>
        <!-- 临时 -->
        <!-- 添加临时车 -->
        <el-dialog title="添加" :visible.sync="showAdd0" :close-on-click-modal="false">
            <el-form class="form_inline" label-width="110px">
                <el-form-item label="车牌号" size="small">
                    <el-input v-model="formPush0.cph"></el-input>
                </el-form-item>
                <el-form-item label="应付金额" size="small">
                    <span v-if="formData1.length!=0">{{formData1[0].tollCost}}</span>
                </el-form-item>
                <el-form-item label="优惠金额" size="small">
                    <span v-if="formData1.length!=0">0</span>
                </el-form-item>
                <el-form-item label="开始时间" size="small">
                    <span v-if="formData1.length!=0">{{$root.getDateArray(formData1[0].startTime)[9]}}</span>
                </el-form-item>
                <el-form-item label="停车时长" size="small">
                    <span v-if="formData1.length!=0">{{formData1[0].timeIndex}}</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAdd0 = false" size="small">取 消</el-button>
                <el-button type="primary" @click="getlist1()" size="small" v-if="!showAdd2">查 询</el-button>
                <el-button type="primary" @click="getgetWebPayData" size="small" v-if="showAdd2">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 月租车 -->
        <!-- <el-dialog title="添加" :visible.sync="showAdd1" :close-on-click-modal="false">
            <el-form class="form_inline" label-width="110px">
                <el-form-item label="车牌号" size="small">
                    <el-input v-model="formPush1.licensePlateNumber"></el-input>
                </el-form-item>
                <el-form-item label="金额" size="small">
                    <el-input v-model="formPush1.tollCost"></el-input>
                </el-form-item>
                <el-form-item label="充值月数" size="small">
                    <el-input v-model="formPush1.monthCount"></el-input>
                </el-form-item>
                <el-form-item label="手机号" size="small">
                    <el-input v-model="formPush1.phone"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" size="small">
                    <el-date-picker v-model="formPush1.startTime" type="datetime" value-format="timestamp"
                        :picker-options="pickerOptions1" placeholder="开始时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAdd1 = false" size="small">取 消</el-button>
                <el-button type="primary" @click="getcarWebRentFeeAdd" size="small">确 定</el-button>
            </span>
        </el-dialog> -->
    </section>
</template>

<script>
import paging from "../../components/paging.vue"
import paging1 from "../../components/paging.vue"
import {
    carWebRentFeeAdd,
    getWebPayData,
    rentPayRecords,
    onlinePayRecords,
    onlinePayRecordsFee,
    delCar,
    addPropertyTypeList,
    updatePropertyTypeList,
    addReply,
    xqSelectList,
    orgTree,
    getCarFeeList
} from '../../url/api';
export default {
    data() {
        return {
            checkStrictly: false,
            showAdd0: false,
            showAdd1: false,
            showAdd2: false,
            moduleInfor: {},
            bindRole: {},
            showmenuList: [],
            formData1: [],
            menuList: [],
            option1: [],
            xqTree: [],
            isAddorUpdate: 1, //1添加、2修改
            formSearch: {
                projectId: '',
                current: 1,
                size: 10,
            },
            formSearch1: {
                projectId: '',
                current: 1,
                size: 10,
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            total1: 0,
            payType: 0,
            formData: [], //数据
            deleBatch: [], //删除数据
            formUpdate: {}, //修改表单
            total: 0, //数据总数
            pages: 0, //页面总数
            addDialog: false,
            updateDialog: false,
            dialog: false,
            replyType: 1, //1。单个回复 2.批量回复
            formPush0: {},
            formPush1: {},
            dataTree: [],
            defaultProps: {
                //树状图key定义
                children: 'data',
                label: 'name',
            },
            defaultProps2: {
                children: 'children',
                label: 'name',
                value: 'id',
                expandTrigger: 'hover',
                checkStrictly: true,
            },
            reply: '',
            formData1: [],
            rules: {
                name: [{ required: true, message: '该项不能为空' }],
                type: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                projectId: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
            },
            imageUrl: '',
        };
    },
    methods: {
        getlist1() {
            let params = {
                current: 1,
                size: 10,
                projectId: this.formSearch.projectId,
                cph: this.formPush0.cph,
            };
            getCarFeeList(params).then((res) => {
                //临时车
                console.log(res);
                if (res.data.ok) {
                    this.formData1 = res.data.data.records;
                    this.showAdd2 = true;
                } else {
                    this.$message(res.data.msg);getCarFeeList
                }
            });
        },
        getcarWebRentFeeAdd() {
            //web后台车辆充钱
            this.formPush1.projectId = this.formSearch.projectId;
            let params = this.formPush1;
            this.showAdd1 = false;
            carWebRentFeeAdd(params).then((res) => {
                console.log(res);
                if (res.data.ok) {
                    this.$message('操作成功');
                    this.getlist();
                } else {
                    this.$message(res.data.msg);
                }
            });
        },
        getgetWebPayData() {
            //后台收现金通行(临时车)
            this.formPush0.projectId = this.formSearch.projectId;
            let params = this.formPush0;
            this.showAdd0 = false;
            getWebPayData(params).then((res) => {
                console.log(res);
                if (res.data.ok) {
                    this.$message('操作成功');

                    this.getlist();
                } else {
                    this.$message(res.data.msg);
                }
            });
        },
        sendData(){
        console.log('emit加载')
        this.Bus.$emit('sendTableDatapk2',{
          formSearch:this.formSearch,
          // total:this.total
      })
      },
        getlist() {
            if (this.payType) {
                this.formSearch.current= 1;
                this.formSearch1.projectId = this.formSearch.projectId;
                rentPayRecords(this.formSearch1).then((res) => {
                    //月租车
                    console.log(res);
                    if (res.data.ok) {
                        this.formData1 = res.data.data.records.filter(
                            (item) => {
                                return item;
                            }
                        );
                        this.total1 = res.data.data.total;
                        // this.sendData();
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            } else {
                getCarFeeList(this.formSearch).then((res) => {
                    //临时车
                    console.log(res);
                    if (res.data.ok) {
                        this.formData = res.data.data.records.filter((item) => {
                            return item;
                        });
                        this.total = res.data.data.total;
                        // this.sendData();
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            }
        },
        getInit() {
            xqSelectList({}).then((res) => {
                //项目选择列表
                console.log(res);
                if (res.data.ok) {
                    this.xqTree = res.data.data;
                    this.formSearch.projectId = this.xqTree[0].id;
                    this.getlist();
                }
            });
            let org_tree = {
                name: '',
                status: 1,
            };
            orgTree(org_tree).then((res) => {
                //获取组织列表
                console.log(res);
                if (res.data.ok) {
                    this.dataTree = res.data.data;
                }
            });
        },
        addList(addList) {
            //添加树状图node节点
            this.$refs[addList].validate((valid) => {
                if (valid) {
                    addPropertyTypeList(this.formPush).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.getlist();
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                            });
                        } else {
                            this.$message('添加失败:' + res.data.msg);
                        }
                    });
                    this.addDialog = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        updateList(formName) {
            //修改
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.formUpdate.gmtCreate) {
                        delete this.formUpdate.gmtCreate;
                    }
                    let params = this.formUpdate;
                    updatePropertyTypeList(params).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message({
                                message: '修改成功',
                                type: 'warning',
                            });
                            this.getlist();
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
                this.updateDialog = false;
            });
        },
        updateShowBox(item) {
            //修改东西弹窗
            // this.formUpdate = JSON.parse(JSON.stringify(item));
            this.formUpdate = {
                id: item.id,
            };
            this.updateDialog = true;
            console.log(this.formUpdate);
        },
        deleInfor(ids) {
            //删除
            let arrId = [];
            if (ids) {
                arrId.push(ids);
            } else {
                if (this.deleBatch.length != 0) {
                    this.deleBatch.filter((item) => {
                        arrId.push(item.carId);
                        return item;
                    });
                }
            }
            this.$confirm('确认删除吗？')
                .then((_) => {
                    delCar(arrId).then((res) => {
                        console.log(res);
                        if (res.data.ok) {
                            this.$message('删除成功');
                            this.getlist();
                        }
                    });
                })
                .catch((_) => {});
        },

            //多选
        handleSelectionChange(val, self) {
            this.deleBatch = val;
            console.log(this.deleBatch);
        },
            //页码改变
        handleCurrentPage(val) {
            this.formSearch.current = val;
            this.getlist();
        },
            //页码改变
        handleCurrentPage1(val) {
            this.formSearch1.current = val;
            this.getlist();
        },
    },
    mounted() {
        this.getInit();
    },
    components: {
        paging,
        paging1,
    },
};
</script>
<style scoped lang='scss'>
.module > .form_demo /deep/ .el-date-editor.el-input{
    width: 156px;
}
.cont_box {
    width: 100%;
    display: flex;
}
.cont_box_left,
.cont_box_right {
    flex: 1;
    background: transparent;
    padding: 10px;
}
.cont_box_left {
    margin-right: 10px;
}
.margin10 {
    margin-bottom: 10px;
}
.marginRight {
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.cont_box_right .el-form-item {
    margin-bottom: 20px;
}
</style>
